<template>
  <div class="header-box">
    <header class="header">
      <i class="is-collapse iconfont"
         :class="{ 'icon-home_zhankai_h_icon':!getIsCollapse,'icon-home_shousuo_icon':getIsCollapse}"
         @click.stop="setIsCollapse(!getIsCollapse)"></i>
      <my-tabs class="header-right"></my-tabs>
    </header>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters, mapActions} from 'Vuex';
  import myTabs from './tabs/MyTabs';

  export default {
    name: 'HeaderBox',
    components: {myTabs},
    props: {},
    data() {
      return {

      };
    },
    methods: {
      ...mapActions(['setIsCollapse']),
    },
    computed: {
      ...mapGetters(['getIsCollapse'])
    },
    watch: {},
    mounted() {
    },
    destroyed() {
    }
  };
</script>
<style scoped lang="less">
  .header-box {

    .header {
      display: flex;
      align-items: center;
      height: 0.5rem;
      padding: 0 0.1rem;
      border-bottom: 0.01rem solid #e6e6e6;
      box-sizing: border-box;

      .is-collapse {
        width: 0.36rem;
        text-align: center;
        padding: 0.1rem 0;
        margin-right: 0.1rem;
        cursor: pointer;
        font-size: 0.24rem;
      }

      .header-right {
        flex: 1;
      }

    }
  }
</style>
